<template>
  <div class="app-container">
    <!-- 切换按钮 -->
    <div class="view-switch-container">
      <el-radio-group v-model="viewMode" class="view-switch" @change="handleViewModeChange">
        <el-radio-button value="table">
          <el-icon><Grid /></el-icon>
          <span>表格视图</span>
        </el-radio-button>
        <el-radio-button value="chart">
          <el-icon><TrendCharts /></el-icon>
          <span>图表视图</span>
        </el-radio-button>
      </el-radio-group>
      <el-button type="primary" @click="refreshData" :loading="loading" class="refresh-btn">
        <el-icon><Refresh /></el-icon>
        刷新数据
      </el-button>
    </div>

    <!-- 表格视图 -->
    <el-row :gutter="10" v-show="viewMode === 'table'">
      <el-col :span="12" class="card-box">
        <el-card>
          <template #header><Cpu style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">CPU</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <template #header><Tickets style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">内存</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><Monitor style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">服务器信息</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><CoffeeCup style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">Java虚拟机信息</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;table-layout:fixed;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
                </tr>
                <tr>
                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
                </tr>
                <tr>
                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
                </tr>
                <tr>
                  <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
                  <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><MessageBox style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">磁盘状态</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
                </tr>
              </thead>
              <tbody v-if="server.sysFiles">
                <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表视图 -->
    <div v-show="viewMode === 'chart'" class="chart-container">
      <el-row :gutter="20">
        <!-- CPU 使用率饼图 -->
        <el-col :span="8">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <Cpu style="width: 1em; height: 1em; vertical-align: middle;" />
                <span style="vertical-align: middle; margin-left: 8px;">CPU 使用率</span>
              </div>
            </template>
            <div ref="cpuChart" style="height: 300px;"></div>
          </el-card>
        </el-col>

        <!-- 系统内存使用率饼图 -->
        <el-col :span="8">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <Tickets style="width: 1em; height: 1em; vertical-align: middle;" />
                <span style="vertical-align: middle; margin-left: 8px;">系统内存</span>
                <span class="memory-total" v-if="server.mem">({{ server.mem.total }}GB)</span>
              </div>
            </template>
            <div ref="memoryChart" style="height: 300px;"></div>
          </el-card>
        </el-col>

        <!-- JVM 内存使用率饼图 -->
        <el-col :span="8">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <CoffeeCup style="width: 1em; height: 1em; vertical-align: middle;" />
                <span style="vertical-align: middle; margin-left: 8px;">JVM 内存</span>
                <span class="memory-total" v-if="server.jvm">({{ server.jvm.total }}MB)</span>
              </div>
            </template>
            <div ref="jvmChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 磁盘使用情况饼图 -->
      <el-row :gutter="20" style="margin-top: 20px;" v-if="server.sysFiles && server.sysFiles.length > 0">
        <el-col :span="8" v-for="(disk, index) in server.sysFiles.slice(0, 3)" :key="index">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <MessageBox style="width: 1em; height: 1em; vertical-align: middle;" />
                <span style="vertical-align: middle; margin-left: 8px;">{{ disk.dirName }} 磁盘</span>
                <span class="disk-total">({{ disk.total }})</span>
              </div>
            </template>
            <div :ref="el => diskCharts[index] = el" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 如果磁盘数量超过3个，显示剩余的 -->
      <el-row :gutter="20" style="margin-top: 20px;" v-if="server.sysFiles && server.sysFiles.length > 3">
        <el-col :span="8" v-for="(disk, index) in server.sysFiles.slice(3, 6)" :key="index + 3">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <MessageBox style="width: 1em; height: 1em; vertical-align: middle;" />
                <span style="vertical-align: middle; margin-left: 8px;">{{ disk.dirName }} 磁盘</span>
                <span class="disk-total">({{ disk.total }})</span>
              </div>
            </template>
            <div :ref="el => diskCharts[index + 3] = el" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 系统信息概览 -->
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <Monitor style="width: 1em; height: 1em; vertical-align: middle;" />
                <span style="vertical-align: middle; margin-left: 8px;">系统信息概览</span>
              </div>
            </template>
            <div class="system-overview">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="overview-item">
                    <div class="overview-icon cpu-icon">
                      <Cpu />
                    </div>
                    <div class="overview-content">
                      <div class="overview-label">CPU 核心数</div>
                      <div class="overview-value">{{ server.cpu?.cpuNum || '-' }} 核</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="overview-item">
                    <div class="overview-icon memory-icon">
                      <Tickets />
                    </div>
                    <div class="overview-content">
                      <div class="overview-label">总内存</div>
                      <div class="overview-value">{{ server.mem?.total || '-' }} GB</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="overview-item">
                    <div class="overview-icon jvm-icon">
                      <CoffeeCup />
                    </div>
                    <div class="overview-content">
                      <div class="overview-label">JVM 总内存</div>
                      <div class="overview-value">{{ server.jvm?.total || '-' }} MB</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="overview-item">
                    <div class="overview-icon disk-icon">
                      <MessageBox />
                    </div>
                    <div class="overview-content">
                      <div class="overview-label">磁盘数量</div>
                      <div class="overview-value">{{ server.sysFiles?.length || 0 }} 个</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { getServer } from '@/api/monitor/server'
import * as echarts from 'echarts'
import { Grid, TrendCharts, Refresh, Cpu, Tickets, CoffeeCup, MessageBox, Monitor } from '@element-plus/icons-vue'

const server = ref({})
const viewMode = ref('chart')
const loading = ref(false)
const { proxy } = getCurrentInstance()

// 图表实例
const cpuChart = ref(null)
const memoryChart = ref(null)
const jvmChart = ref(null)
const diskCharts = ref([])

// ECharts 实例
let cpuChartInstance = null
let memoryChartInstance = null
let jvmChartInstance = null
let diskChartInstances = []

// 获取服务器数据
function getList() {
  loading.value = true
  proxy.$modal.loading("正在加载服务监控数据，请稍候！")
  getServer().then(response => {
    server.value = response.data
    proxy.$modal.closeLoading()
    loading.value = false
    
    // 如果是图表视图，更新图表
    if (viewMode.value === 'chart') {
      nextTick(() => {
        initCharts()
      })
    }
  }).catch(() => {
    loading.value = false
    proxy.$modal.closeLoading()
  })
}

// 刷新数据
function refreshData() {
  getList()
}

// 视图模式切换
function handleViewModeChange(value) {
  if (value === 'chart') {
    nextTick(() => {
      initCharts()
    })
  }
}

// 初始化所有图表
function initCharts() {
  initCpuChart()
  initMemoryChart()
  initJvmChart()
  initDiskCharts()
}

// CPU 使用率饼图
function initCpuChart() {
  if (!cpuChart.value || !server.value.cpu) return
  
  if (cpuChartInstance) {
    cpuChartInstance.dispose()
  }
  
  cpuChartInstance = echarts.init(cpuChart.value)
  
  const cpuUsed = server.value.cpu.used
  const cpuFree = server.value.cpu.free
  
  // 根据CPU使用率确定颜色
  const getCpuColor = (usage) => {
    if (usage >= 90) return '#ff4d4f'  // 红色 - 危险
    if (usage >= 80) return '#faad14'  // 橙色 - 警告
    if (usage >= 70) return '#fa8c16'  // 橙黄色 - 注意
    return '#52c41a'  // 绿色 - 正常
  }
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        return `CPU使用情况<br/>${params.name}: ${params.value}%`
      }
    },
    legend: {
      orient: 'horizontal',
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'CPU使用情况',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: function(params) {
            return `${params.name}\n${params.value}%`
          },
          fontSize: 12
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          { 
            value: cpuUsed, 
            name: '已使用', 
            itemStyle: { 
              color: getCpuColor(cpuUsed)
            }
          },
          { 
            value: cpuFree, 
            name: '空闲', 
            itemStyle: { 
              color: '#e6f7ff'
            }
          }
        ]
      }
    ]
  }
  
  cpuChartInstance.setOption(option)
}

// 系统内存使用情况饼图
function initMemoryChart() {
  if (!memoryChart.value || !server.value.mem) return
  
  if (memoryChartInstance) {
    memoryChartInstance.dispose()
  }
  
  memoryChartInstance = echarts.init(memoryChart.value)
  
  const usedMemory = server.value.mem.used
  const freeMemory = server.value.mem.free
  const memoryUsage = server.value.mem.usage
  
  // 根据内存使用率确定颜色
  const getMemoryColor = (usage) => {
    if (usage >= 90) return '#ff4d4f'  // 红色 - 危险
    if (usage >= 80) return '#faad14'  // 橙色 - 警告
    if (usage >= 70) return '#fa8c16'  // 橙黄色 - 注意
    return '#52c41a'  // 绿色 - 正常
  }
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        if (params.name === '已用内存') {
          return `系统内存<br/>${params.name}: ${params.value}GB (${memoryUsage}%)`
        } else {
          return `系统内存<br/>${params.name}: ${params.value}GB`
        }
      }
    },
    legend: {
      orient: 'horizontal',
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '系统内存',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: function(params) {
            if (params.name === '已用内存') {
              return `${params.name}\n${memoryUsage}%`
            } else {
              return `${params.name}\n${params.value}GB`
            }
          },
          fontSize: 12
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          {
            value: usedMemory,
            name: '已用内存',
            itemStyle: {
              color: getMemoryColor(memoryUsage)
            }
          },
          {
            value: freeMemory,
            name: '剩余内存',
            itemStyle: {
              color: '#e6f7ff'
            }
          }
        ]
      }
    ]
  }
  
  memoryChartInstance.setOption(option)
}

// JVM 内存使用情况饼图
function initJvmChart() {
  if (!jvmChart.value || !server.value.jvm) return
  
  if (jvmChartInstance) {
    jvmChartInstance.dispose()
  }
  
  jvmChartInstance = echarts.init(jvmChart.value)
  
  const usedJvm = server.value.jvm.used
  const freeJvm = server.value.jvm.free
  const jvmUsage = server.value.jvm.usage
  
  // 根据JVM使用率确定颜色
  const getJvmColor = (usage) => {
    if (usage >= 90) return '#ff4d4f'  // 红色 - 危险
    if (usage >= 80) return '#faad14'  // 橙色 - 警告
    if (usage >= 70) return '#fa8c16'  // 橙黄色 - 注意
    return '#52c41a'  // 绿色 - 正常
  }
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        if (params.name === '已用内存') {
          return `JVM内存<br/>${params.name}: ${params.value}MB (${jvmUsage}%)`
        } else {
          return `JVM内存<br/>${params.name}: ${params.value}MB`
        }
      }
    },
    legend: {
      orient: 'horizontal',
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'JVM内存',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: function(params) {
            if (params.name === '已用内存') {
              return `${params.name}\n${jvmUsage}%`
            } else {
              return `${params.name}\n${params.value}MB`
            }
          },
          fontSize: 12
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          {
            value: usedJvm,
            name: '已用内存',
            itemStyle: {
              color: getJvmColor(jvmUsage)
            }
          },
          {
            value: freeJvm,
            name: '剩余内存',
            itemStyle: {
              color: '#e6f7ff'
            }
          }
        ]
      }
    ]
  }
  
  jvmChartInstance.setOption(option)
}

// 磁盘使用情况饼图
function initDiskCharts() {
  if (!server.value.sysFiles || server.value.sysFiles.length === 0) return
  
  // 清理旧的图表实例
  diskChartInstances.forEach(instance => {
    if (instance) instance.dispose()
  })
  diskChartInstances = []
  
  // 为每个磁盘创建饼图
  server.value.sysFiles.forEach((disk, index) => {
    if (!diskCharts.value[index]) return
    
    const chartInstance = echarts.init(diskCharts.value[index])
    diskChartInstances[index] = chartInstance
    
    const usedSpace = parseFloat(disk.used.replace('GB', ''))
    const freeSpace = parseFloat(disk.free.replace('GB', ''))
    const usagePercent = disk.usage
    
    // 根据使用率确定颜色
    const getUsageColor = (usage) => {
      if (usage >= 90) return '#ff4d4f'  // 红色 - 危险
      if (usage >= 80) return '#faad14'  // 橙色 - 警告
      if (usage >= 70) return '#fa8c16'  // 橙黄色 - 注意
      return '#52c41a'  // 绿色 - 正常
    }
    
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          if (params.name === '已用空间') {
            return `${params.seriesName}<br/>${params.name}: ${params.value}GB (${usagePercent}%)`
          } else {
            return `${params.seriesName}<br/>${params.name}: ${params.value}GB`
          }
        }
      },
      legend: {
        orient: 'horizontal',
        bottom: '5%',
        left: 'center'
      },
      series: [
        {
          name: `${disk.dirName} 磁盘`,
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'outside',
            formatter: function(params) {
              if (params.name === '已用空间') {
                return `${params.name}\n${usagePercent}%`
              } else {
                return `${params.name}\n${params.value}GB`
              }
            },
            fontSize: 12
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          labelLine: {
            show: true
          },
          data: [
            {
              value: usedSpace,
              name: '已用空间',
              itemStyle: {
                color: getUsageColor(usagePercent)
              }
            },
            {
              value: freeSpace,
              name: '剩余空间',
              itemStyle: {
                color: '#e6f7ff'
              }
            }
          ]
        }
      ]
    }
    
    chartInstance.setOption(option)
  })
}

// 窗口大小改变时重新调整图表
function handleResize() {
  if (cpuChartInstance) cpuChartInstance.resize()
  if (memoryChartInstance) memoryChartInstance.resize()
  if (jvmChartInstance) jvmChartInstance.resize()
  diskChartInstances.forEach(instance => {
    if (instance) instance.resize()
  })
}

// 生命周期
onMounted(() => {
getList()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  if (cpuChartInstance) cpuChartInstance.dispose()
  if (memoryChartInstance) memoryChartInstance.dispose()
  if (jvmChartInstance) jvmChartInstance.dispose()
  diskChartInstances.forEach(instance => {
    if (instance) instance.dispose()
  })
})
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.view-switch-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-switch {
  display: flex;
  align-items: center;
  
  :deep(.el-radio-button__inner) {
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
    
    .el-icon {
      margin-right: 6px;
    }
  }
  
  :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  
  :deep(.el-radio-button:last-child .el-radio-button__inner) {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}

.refresh-btn {
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  
  .el-icon {
    margin-right: 6px;
  }
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
}

.chart-container {
  .chart-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
}

.system-overview {
  padding: 20px;
  
  .overview-item {
    display: flex;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    
    .overview-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 24px;
      color: white;
      
      &.cpu-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.memory-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.jvm-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.disk-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }
    
    .overview-content {
      flex: 1;
      
      .overview-label {
        font-size: 14px;
        color: #909399;
        margin-bottom: 4px;
      }
      
      .overview-value {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
}

.disk-total,
.memory-total {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
  font-weight: normal;
}

// 响应式设计
@media (max-width: 768px) {
  .view-switch-container {
    flex-direction: column;
    gap: 16px;
    
    .view-switch {
      width: 100%;
      justify-content: center;
    }
    
    .refresh-btn {
      width: 100%;
    }
  }
  
  .system-overview {
    .overview-item {
      .overview-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
      }
      
      .overview-content {
        .overview-value {
          font-size: 18px;
        }
      }
    }
  }
}

// 暗黑模式支持
@media (prefers-color-scheme: dark) {
  .view-switch-container {
    background: #2d3748;
    color: #e2e8f0;
  }
  
  .system-overview {
    .overview-item {
      background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
      
      .overview-content {
        .overview-label {
          color: #a0aec0;
        }
        
        .overview-value {
          color: #e2e8f0;
        }
      }
    }
  }
}
</style>
